import { Component,OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import {Store,Select} from '@ngxs/store';
import {SetNav,SetRoster,BackgroundState,SetBackground,BackgroundVariedState,SetBackgroundVaried} from '../app.state';
import {Observable} from 'rxjs';

@Component({
  selector: 'app-bar',
  templateUrl: './bar.component.html',
  styleUrls: ['./bar.component.css']
})
export class BarComponent implements OnInit {
  @Select(BackgroundState) background$:Observable<any>; //获取背景颜色
  @Select(BackgroundVariedState) Varied$:Observable<any>; //获取背景颜色
  selectStyle={
    backgroundColor:'#fff',
    color:'#000',
  }; // 激活样式
  backGround='#00CCCC';
  isVaried = true;
  constructor(
      private route:Router,
      private store:Store
  ) {
    this.Varied$.subscribe(res=>{
      this.isVaried=res;
    });
    this.background$.subscribe(res=>{
      this.backGround=res.barBackground;
    })
  }
  ngOnInit() {
      //进行路由匹配

  }
  // 去到首页
 goIndex(){
  this.route.navigate(['/home/index']);
   this.store.dispatch(new SetBackground('#00CCCC','#00CCCC'));
   this.store.dispatch(new SetBackgroundVaried(false));
   this.store.dispatch(new SetNav('index'));

 }
 // 去到花名册
  goRoster(){
    this.route.navigate(['/home/roster']);
    this.store.dispatch(new SetBackgroundVaried(false));
    this.store.dispatch(new SetNav('roster'));
    this.store.dispatch(new SetRoster(null,null));
  }
}
